<template>
  <div class="t-header">
    <div class="t-header_ctn">
      <img
        src="../../../assets/img/hebei-logo.png"
        alt=""
        style="width: 180px"
      />
    </div>
    <div class="t-header_detail">
      <div class="t-header_detail_tail">
        <div
          @click="(e) => e.preventDefault()"
          @mouseover="showMenu"
          class="t-header_detail_tail-txt"
        >
          {{ teacher_name }}（教师）
        </div>
        <div class="t-float" :class="activeClass == index ? 'actived' : ''">
          <ul @mouseleave="closeMenu">
            <li @click="modifyPwdVisible = true">修改密码</li>
            <li @click="quitLogin">退出登录</li>
          </ul>
        </div>
      </div>
      <modify-pwd :visible.sync="modifyPwdVisible"></modify-pwd>
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex";
import modifyPwd from "./modifyPwd";

export default {
  components: {
    modifyPwd,
  },
  data() {
    return {
      index: 1,
      activeClass: 0,
      currentMenu: "teacher_index",
      modifyPwdVisible: false,
      menus: [
        { name: "首页", id: "teacher_index" },
        //{ name: "课程中心", id: "teacher_course" },
        // { name: "资源中心", id: "teacher_resource" },
        // { name: "教学分析", id: "teacher_analysis" },
        // { name: "金课工具", id: "teacher_tools" },
      ],
    };
  },
  computed: {
    ...mapState({
      teacher_name: (state) => state.public.userName,
    }),
  },
  methods: {
    showMenu() {
      console.log("%%%%%%%%");
      this.activeClass = 1;
    },
    closeMenu() {
      console.log("%%%%%%%%");
      this.activeClass = 0;
    },
    tabChange(target) {
      const key = target.id;
      if (this.$route.name !== key) {
        this.currentMenu = key;
        this.$router.push({ name: key });
      }
    },
    quitLogin() {
      this.$store.commit("public/clearStorage");
      this.$store.commit("super/clearStorage");
      this.$store.commit("teacher/clearStorage");
      localStorage.clear();
      sessionStorage.clear();
      this.$router.push({ name: "index" });
    },
    modifyPwd() {},
  },
};
</script>

<style lang="scss" scoped>
.t-float {
  position: absolute;
  background-color: rgba(51, 51, 51, 0.7);
  top: 61px;
  right: 1px;
  width: 13vw;
  z-index: 500;
  display: none;
  border: 1px solid #f7f7f7;
  border-radius: 5px;
}
.t-float ul {
  padding-top: 5px;
  padding-bottom: 5px;
  list-style: none;
}
.t-float ul li {
  color: #fff;
  letter-spacing: 3px;
  text-align: center;
  cursor: pointer;
  margin-bottom: 3px;
  /* font-size: 1.5rem; */
  font-weight: 500;
}
.t-float ul li:hover {
  background-color: rgba(86, 67, 250, 0.7);
}
.actived {
  display: block;
  font-size: 14px;
}
</style>
